<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_事件绑定</title>
</head>
<body>
    <div id="app">
      <p>{{count}}</p>
      <!-- 1. 内联的方式 v-on:事件名="内联逻辑代码" -->
      <!-- <button v-on:click="count++">+1</button> -->
      <!-- 2. 简写形式  v-on: =>   @   @事件名="内联代码" -->
      <!-- <button @click="count++">+1</button> -->
      <!-- 3. 函数形式  @事件名="函数名" -->
      <button @click="fn">+1</button>

     <h3>小黑售卖机</h3>
     <p>我有钱: {{money}}</p>
     <!-- 使用函数的时候传递的是实参 -->
     <button @click="buy(5)">可乐5元</button>
     <button @click="buy(15)">鸟窝咖啡</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            // data放的是数字
            data: {
                count: 1,
                msg: 'hello world',
                money: 100
            },
            // methods 里面放到是方法
            methods: {
                fn () {
                    // this是vue实例化对象
                    console.log(this)
                    // 数据和方法直接通过this 可以拿到
                    this.count = this.count + 1
                },
                // 定义函数的时候写形参 可以使用在函数体里
                buy(val) {
                    console.log(val);
                    this.money = this.money  - val
                }
            }
        })

    </script>
</body>
</html>